<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <h2>用户注册</h2>
    <form class="layui-form" lay-filter="register-form">
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-block">
                <input type="text" name="userName" lay-verify="required" placeholder="请输入账号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="userPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="userRealname" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="userPhone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="userEmail" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="register-submit">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!--<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>-->
<script src="../layui/layui.js"></script>
<script>
    layui.use(['form','jquery','layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        // 监听表单提交
        form.on('submit(register-submit)', function (data) {
            // 发送 Ajax 请求，将数据提交到后端进行注册
            $.ajax({
                url: '/kamun/user/register',  // 后端注册接口的 URL
                type: 'POST',
                data: data.field,
                success: function (res) {
                    // // 注册成功后的操作，例如跳转到登录页面
                    //     layer.alert("注册成功")
                    //     window.location.href = '/kamun/user/login';  // 登录页面的 URL
                    // 注册成功后的操作，例如弹出提示框并延迟跳转到登录页面
                    layer.alert("注册成功", function () {
                        setTimeout(function () {
                            window.location.href = '/kamun/user/login';  // 登录页面的 URL
                        });  // 延迟跳转的时间，单位为毫秒，这里设置为2秒
                    });

                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(xhr.responseText);
                    layer.msg('注册失败，请稍后重试', {icon: 2});
                }
            });

            return false;  // 阻止表单默认提交
        });

        // 表单验证规则
        form.verify({
            phone: function (value, item) {
                if (!/^[1-9]\d{10}$/.test(value)) {
                    return '手机号格式不正确';
                }
            },
            email: function (value, item) {
                if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)) {
                    return '邮箱格式不正确';
                }
            }
        });
    });
</script>
</body>
</html>
